<template>
  <a-table
    :columns="CardTable.columns"
    :scroll="CardTable.scroll"
    :dataSource="CardTable.data"
    :pagination="CardTable.pagination"
    @change="onTableChange"
    bordered
  >
    <!--文字提示-->
    <div slot="splitText" slot-scope="text, scope">
      <a-tooltip v-if="text">
        <template slot="title">
          {{ text }}
        </template>
        <a>{{ splitText(text) }}</a>
      </a-tooltip>
    </div>

    <div slot="operate" slot-scope="text, scope">
      <div v-if="scope.handle && scope.handle.length">
        <a-button
          style="margin-left: 5px"
          v-for="(item, index) in scope.handle"
          :key="index"
          class="a-handle"
          @click="item.callback(scope)"
          >{{ item.name }}</a-button
        >
      </div>
    </div>
  </a-table>
</template>

<script>
export default {
  name: "data-table",
  data() {
    return {
      count: 4
    };
  },
  props: {
    split_text_length: { default: () => 15 },
    total_count: { default: () => "" },
    title: { require: false },
    handleKey: { default: "key" },
    CardTable: {
      default: () => {
        return {
          scroll: "",
          limits: true,
          title: "这里是测试标题",
          titleArr: [],
          handleArr: [],
          columns: [],
          data: [],
          pagination: {
            defaultPageSize: 1,
            showQuickJumper: true
          }
        };
      }
    }
  },
  methods: {
    splitText(text) {
      if (text) {
        let max_len = this.split_text_length;
        return text.length > max_len
          ? text.substring(0, max_len) + "..."
          : text;
      }
    },
    onTableChange(pagination, filters, sorter) {
      this.$emit("onChange", { pagination, filters, sorter });
    }
  }
};
</script>

<style scoped></style>
